

<template>
  <div class="bgColor">
    <div class="mainbox">
      <div class="categoryBox">
        <div class="divbox">
          <span class="label">媒体类型：</span>
          <ul class="tabbox" :class="{ setHeight: oneOnOff }">
            <li
              @click="tabHandle(index, item, 1)"
              class="tabItem"
              v-for="(item, index) in tabList"
              :class="{ activeCss: index == currentIndex }"
            >
              {{ item.name }}
            </li>
          </ul>
          <div class="opera" @click="oneOnOff = !oneOnOff">
            <template v-if="!oneOnOff">
              <span>展开</span>
              <img class="img" src="@/assets/xia.png" alt="" />
            </template>
            <template v-if="oneOnOff">
              <span>收起</span>
              <img class="img" src="@/assets/up.png" alt="" />
            </template>
          </div>
        </div>
        <div class="divbox">
          <span class="label">应用类型：</span>
          <ul class="tabbox" :class="{ setHeight: twoOnOff }">
            <li
              @click="tabHandle(index, item, 2)"
              class="tabItem"
              v-for="(item, index) in applyList"
              :class="{ activeCss: index == currentTwoIndex }"
            >
              {{ item.name }}
            </li>
          </ul>
          <div class="opera" @click="twoOnOff = !twoOnOff">
            <template v-if="!twoOnOff">
              <span>展开</span>
              <img class="img" src="@/assets/xia.png" alt="" />
            </template>
            <template v-if="twoOnOff">
              <span>收起</span>
              <img class="img" src="@/assets/up.png" alt="" />
            </template>
          </div>
        </div>
      </div>

      <div class="box">
        <ul class="boxflex">
          <li
            v-for="(item, index) in orderList"
            :class="{ activeCssOrder: index == currentIndexOrder }"
            @click="orderHandle(index)"
          >
            {{ item }}
          </li>
        </ul>
        <!-- <el-switch
          v-model="value2"
          class="switch"
          style="--el-switch-on-color: #178fd1; --el-switch-off-color: #c4c9d1"
        />
        <span class="text">仅下载</span> -->
      </div>

      <div class="majorList" v-if="resultList.length > 0">
        <div
          class="itembox"
          v-for="(item, index) in resultList"
          @click="gotoDetail(item)"
        >
          <img class="majorimg" @error="onError" :src="item.file" alt="" />
          <div class="infobox">
            <p class="title">{{ item.DocTitle }}</p>
            <div class="flexbox">
              <div class="flex">
                <img class="icon" src="../assets/file.png" alt="" />
                <span class="spancss">{{ item.newSize }}</span>
              </div>
            </div>
            <div class="flexbox">
              <div class="flex">
                <img class="icon" src="../assets/eye.png" alt="" />
                <span class="spancss">{{ item.ViewCount }}</span>
              </div>
              <div class="flex">
                <img src="../assets/message.png" alt="" />
                <span class="spancss">{{
                  item.CommentCount ? item.CommentCount : 0
                }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <empty v-else></empty>
      <div class="pagination" v-if="resultList.length > 0">
        <el-pagination
          background
          layout="prev, pager, next,total,jumper"
          :total="total"
          @current-change="sizeChange"
          :current-page="params.page"
          :page-size="params.pageSize"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
import { GetMediaType, getApplication, material } from '@/api/api.js'
import { reactive } from 'vue'
import staticImg from '@/assets/static.png'
import { eventBus } from '@/utils/eventBus.js'
import empty from '@/components/empty.vue'
const currentIndex = ref(0)
const currentIndexOrder = ref(0)
const tabList = ref([])
const params = reactive({
  projectId: '2utrackwo41egqxjetrgja',
  page: 1,
  pageSize: 12,
  array_media: '',
  array_applicatio: '',
  orders: '',
  docname: '',
})
const currentTwoIndex = ref(0)

const oneOnOff = ref(false)
const twoOnOff = ref(false)
const applyList = ref([])

const value2 = ref('')

const orderList = ref(['默认排序', '上传时间', '热度', '大小'])

const resultList = ref([])
const total = ref(0)
function webListApi() {
  material(params).then((res) => {
    resultList.value = JSON.parse(res.list).obj
    total.value = res.materialCount
  })
}
function tabHandle(index, item, type) {
  if (type == 1) {
    currentIndex.value = index
    params.array_media = item.id
  } else if (type == 2) {
    currentTwoIndex.value = index
    params.array_applicatio = item.id
  }
  webListApi()
}
webListApi()

function onError(event) {
  event.target.src = staticImg
}

function sizeChange(size) {
  params.page = size
  webListApi()
}

function gotoDetail(item) {
  window.open('https://zyk.icve.com.cn/materialDetailed?id=' + item.id)
}
function searchHandle(value) {
  params.docname = value
  webListApi()
}
onMounted(() => {
  eventBus.$off('searchHandleSucai', searchHandle)
  eventBus.$on('searchHandleSucai', searchHandle)
})
onBeforeUnmount(() => {
  eventBus.$off('searchHandleSucai', searchHandle)
})
function mediaApi() {
  GetMediaType().then((res) => {
    tabList.value = JSON.parse(res.media)
    tabList.value.unshift({
      id: '',
      name: '全部',
    })
  })
}
mediaApi()

function applicationApi() {
  getApplication({ projectId: '2utrackwo41egqxjetrgja' }).then((res) => {
    applyList.value = JSON.parse(res.application)
    applyList.value.unshift({
      id: '',
      name: '全部',
    })
  })
}
applicationApi()

const orderToMap = {
  0: '',
  1: 'CreateTime asc',
  2: 'ViewCount asc',
  3: 'Size asc',
}

function orderHandle(index) {
  currentIndexOrder.value = index
  params.orders = orderToMap[index]
  webListApi()
}
</script>
<style lang="scss" scoped>
.switch {
  margin-left: 24px;
}
.activeCssOrder {
  background: #178fd1;
  color: #fff;
  border-radius: 4px 4px 0px 0px;
}
.text {
  margin-left: 10px;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 16px;
  color: #2e2f33;
}
.boxflex {
  display: flex;
  li {
    padding: 9px 16px;
    margin-right: 8px;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 16px;
    cursor: pointer;
  }
}
.box {
  border-bottom: 1px solid #178fd1;
  display: flex;
  align-items: center;
  margin-top: 32px;
  height: 42px;
}
.opera {
  cursor: pointer;
  position: relative;
  top: 4px;
  .img {
    position: relative;
    top: 2px;
  }
  span {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 16px;
    color: #178fd1;
  }
}
.divbox {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.divbox:last-child {
  margin-bottom: 0px;
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 60px;
  margin-top: 20px;
}
.majorList {
  display: flex;
  flex-wrap: wrap;
}
.tabItem:last-child {
  margin-right: 0;
}
.bgColor {
  min-height: 528px;
}
.flexbox {
  display: flex;
  justify-content: space-between; /* 实现两端对齐 */
  margin-bottom: 6px;
}
.flex {
  display: flex;
  align-items: center;
}
.spancss {
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 14px;
  color: #8d9099;
  margin-left: 8px;
}
.title {
  width: 230px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-bottom: 12px;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 16px;
  color: #2e2f33;
}
.infobox {
  padding: 8px 12px 0px 12px;
}
.itembox {
  width: 305px;
  height: 286px;
  background: #ffffff;
  border-radius: 8px 8px 8px 8px;
  margin-top: 28px;
  margin-right: 20px;
  transition: transform 0.3s ease;
  overflow: hidden;
  cursor: pointer;
  .majorimg {
    height: 172px;
    width: 100%;
  }
}
.itembox:hover {
  transform: translateY(-8px);
  box-shadow: 0px 4px 12px 0px rgba(0, 39, 60, 0.12);
  .title {
    color: #178fd1;
  }
}
.itembox:nth-child(4n) {
  margin-right: 0;
}
.activeCss {
  background: #e6f3fa;
  color: #178fd1 !important;
  border-radius: 50px 50px 50px 50px;
}
.label {
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 16px;
  color: #2e2f33;
  flex-shrink: 0;
  margin-top: 4px;
}
.tabItem {
  padding: 4px 14px;
  cursor: pointer;
  margin: 0 20px;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 16px;
  color: #45474d;
  margin-bottom: 4px;
  height: 34px;
}
.tabbox {
  display: flex;
  flex-wrap: wrap;
  width: 1092px;
  overflow: hidden;
  height: 37px;
}
.categoryBox {
  background: #ffffff;
  border-radius: 8px 8px 8px 8px;
  margin: 30px 0;
  margin-bottom: 0px;
  padding: 34px 30px;
}
.setHeight {
  height: auto !important;
}
</style>
